<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div class="waterbox">
        <div v-ripple class="ripple">Ripple</div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'WaterRipple',
})
</script>

<style lang="less" scoped>
.waterbox {
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .ripple {
    width: 100%;
    height: 100%;
    background: #fff;
    margin: 0 1rem;
    font-family: century gothic, texgyreadventor, stheiti, sans-serif;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    line-height: 70vh;
  }
}
</style>
